import React,{useState} from 'react'
import {View, StyleSheet, Button, Text, ImageBackground, ScrollView, Image,StatusBar} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements'
import {useNavigation} from '@react-navigation/native'
import TouchableView from '../components/touchableView';
import screen from '../utils/screen';
import Images from '../images/Images';
import {useAppStore} from '../store/useAppStore';

const itemW = ( screen.width - 60 ) /2
const Home = ()=>{

    const [showWeb,setShowWeb] = useState(false)
    const headerHeight = useHeaderHeight()
    const navigation = useNavigation()



    return (
        <ImageBackground
            source={Images.loginBg}
            imageStyle={{width:screen.width,height:screen.height}}
            style={[styles.container,{paddingTop:StatusBar.currentHeight+10}]}
        >
            <View style={styles.header}>
                <Text style={{color:'#333',fontSize:screen.PIXEL_50,fontWeight:'600'}}>个人业务</Text>
                <Image
                    source={Images.user}
                    style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}
                    resizeMode={'contain'}
                />
            </View>
            <TouchableView
                style={styles.allBtn}
            >
                <Text style={{color:'#333',fontSize:14}}>全部</Text>
                <Image
                    source={Images.down}
                    style={{width:screen.PIXEL_40,height:screen.PIXEL_20}}
                    resizeMode={'contain'}
                />
            </TouchableView>

            <ScrollView>
                <View style={styles.content}>

                    <TouchableView
                        style={styles.itemWrap}
                        onPress={()=>{
                            navigation.navigate('SelectData')
                        }}
                    >
                        <ImageBackground
                            imageStyle={styles.itemImg}
                            source={Images.person_loan}
                            >
                            <View style={styles.itemContent}>
                                <Text style={{color:'#DE7B11',fontSize:screen.PIXEL_30,marginBottom:screen.PIXEL_16}}>个人信用贷款</Text>
                                <TouchableView
                                    style={styles.applyBtn}
                                    onPress={()=>{
                                        navigation.navigate('SelectData')
                                    }}
                                >
                                    <Text style={{color:'#fff'}}>去申请</Text>
                                </TouchableView>
                            </View>


                        </ImageBackground>

                    </TouchableView>

                    <TouchableView
                        style={styles.itemWrap}
                    >
                        <ImageBackground
                            imageStyle={styles.itemImg}
                            source={Images.company_loan}
                        >
                            <View style={styles.itemContent}>
                                <Text style={{color:'#4680C8',fontSize:screen.PIXEL_30,marginBottom:screen.PIXEL_16}}>企业信用贷款</Text>
                                <Text style={{color:'#4680C8',fontSize:screen.PIXEL_24}}>申请简单</Text>
                            </View>

                        </ImageBackground>
                    </TouchableView>

                    <TouchableView
                        style={styles.itemWrap}
                    >
                        <ImageBackground
                            imageStyle={styles.itemImg}
                            source={Images.car_loan}
                        >
                            <View style={styles.itemContent}>
                                <Text style={{color:'#7957A5',fontSize:screen.PIXEL_30,marginBottom:screen.PIXEL_16}}>车主信用贷款</Text>
                                <Text style={{color:'#7957A5',fontSize:screen.PIXEL_24}}>纯信用无抵押</Text>
                            </View>

                        </ImageBackground>
                    </TouchableView>

                    <TouchableView
                        style={styles.itemWrap}
                    >
                        <ImageBackground
                            imageStyle={styles.itemImg}
                            source={Images.bailing_loan}
                        >
                            <View style={styles.itemContent}>
                                <Text style={{color:'#D6683C',fontSize:screen.PIXEL_30,marginBottom:screen.PIXEL_16}}>白领新一贷</Text>
                                <Text style={{color:'#D6683C',fontSize:screen.PIXEL_24}}>快至1天放款</Text>
                            </View>

                        </ImageBackground>
                    </TouchableView>

                    <TouchableView
                        style={styles.item}
                    >
                        <Text>相关法规</Text>
                    </TouchableView>
                </View>
            </ScrollView>


        </ImageBackground>
    )
}

export default Home

const styles = StyleSheet.create({
    container:{
        flex:1,paddingHorizontal:20
    },
    header:{
        flexDirection: 'row',alignItems: 'center',justifyContent:'space-between'
    },
    allBtn:{
        marginTop: screen.PIXEL_60,flexDirection:'row',alignItems:'center'
    },
    content:{
        flex:1,marginTop:20,flexWrap:'wrap',flexDirection:'row',justifyContent:'space-between'
    },
    item:{
        width:itemW,height:screen.PIXEL_200,backgroundColor: '#fff',
        marginBottom:20,justifyContent: 'center',alignItems:'center',borderRadius:screen.PIXEL_24
    },
    itemWrap:{
        width:itemW,height:screen.PIXEL_200, marginBottom:20,borderRadius:screen.PIXEL_24
    },
    itemImg:{
        width:itemW,height:screen.PIXEL_200
    },
    itemContent:{
        position:'absolute',top:screen.PIXEL_30,left:screen.PIXEL_30
    },
    applyBtn:{
        width:screen.PIXEL_120,height:screen.PIXEL_40,justifyContent:'center',alignItems:'center',
        borderRadius: 100,backgroundColor: '#DE7B11'
    }
})
